<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      [v-cloak] {
        display: none;
      }
      .bg {
        background: red;
      }
      .sel {
        color: aquamarine;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1 v-cloak>{{msg}}</h1>
      <button v-on:click="fun1">点击</button>
      <!--v-on绑定事件 可以简写为@ -->
      <button @mouseover="fun1">点击</button>

      <!-- 动态绑定类名： -->
      <h3 class="bg sel">{{msg}}</h3>
      <h3 v-bind:class="cl">{{msg}}</h3>
      <!-- v-bind动态绑定属性 可以简写为： -->
      <h3 :class="cl">{{msg}}</h3>
      <!-- 绑定多个类名的时候可以用 数组 -->
      <h3 :class="[cl,'sel']">{{msg}}</h3>
      <!-- 还可以用对象 -->

      <h5 :class="{bg:true,sel:true}">{{msg}}</h5>

      <h5 :class="{bg:flag>3}">{{msg}}11111</h5>
      <h5 :class="[cl,flag>3?'sel':'']">{{msg}}22222</h5>

      <!-- 动态绑定style 用对象绑定 -->

      <h1 :style="{background: red}">{{msg}}</h1>
    </div>
    <script src="vue-2.4.0.js"></script>
    <script>
      let obj = { name: "小明" };

      var vm = new Vue({
        el: "#app",
        data: {
          msg: "天真热，该吃冰棍了",
          cl: "bg",
          flag: 5,
          red: "red",
        },
        methods: {
          fun1() {
            alert(this.msg);
          },
        },
      });

      //  vue指令 指挥的命令
      // 指令作用在html标签里  指令都以v-xxx开头

      //   1.v-cloak  解决插值闪烁
      //   在vue.js代码加载完毕后自动把自身指令删除

      //   2. v-on 简写为@ 用来绑定事件

      //   3.v-bind  动态绑定属性
      //   在属性后面绑定的是一个变量就叫动态绑定
      //   （1）动态绑定类名 可以用数组也可以用对象
      //   (2)动态绑定style 用对象
      // （3）图片的src也可以动态绑定
    </script>
  </body>
</html>
